<template>
    <div class="container">
        <el-input clearable="true" type="textarea" style="margin-bottom: 10px;" v-model="clipboard_content" :placeholder="`手动输入或者点击下方选择[ ${resource_name} ]的目录路径`">
        </el-input>

        <div class="operation-container">
            <el-upload accept=".请复制路径" action="" :on-progress="onProgress" :show-file-list="false">
                <el-button :plain="true" type="primary">选择文件路径</el-button>
            </el-upload>
            <el-button @click="onClickUpload" style="margin-left: 40px;" plain type="success">上传</el-button>
        </div>

        <el-divider></el-divider>
        <div style="margin: 20px; font-size: 27px; color: #e26e32;">资源上传说明</div>
        <div>
            <img src="../../static/upload_manual.png" />
        </div>
    </div>
</template>
<script setup>
// HTML 代码如下

import { ref } from "vue-demi"
import { ShowTip } from '../../utils/utils'
import { onUnmounted, onMounted } from 'vue'

const props = defineProps({
    resource_name: {
        default: "课程 or 章节"
    }
})

let clipboard_content = ref('')
let monitor = () => {
    navigator.clipboard.readText().then((value) => {
        if(value != ""){ // 防止无法手动更改
            ShowTip.successBox('路径获取成功', 3600)
            clipboard_content.value = value
            navigator.clipboard.writeText("")
        }
    })
}
onMounted(() => {
    navigator.clipboard.writeText("") // 初始化
    document.addEventListener('mousemove', monitor, false);
}),

onUnmounted(() => {
    document.removeEventListener('mousemove', monitor, false);
})

const emits = defineEmits()
const onClickUpload = () => {
    emits('uploadByPath', {
          path: clipboard_content.value,
          type: props.resource_name == "课程"?3: 2
        })
}


</script>
<style lang="scss" scoped>
.operation-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
</style>